import React, { Component } from 'react'
import ReactDom from 'react-dom'
import { Router, Route, Link, IndexLink, hashHistory, IndexRoute } from 'react-router'
import * as Actions from '../actions'


export default class BookList extends Component {
    constructor(props) {
        super(props)
        this.state = { books: [], category: {} }
        this.componentWillReceiveProps(props)
    }
    componentWillReceiveProps(nextProps) {
        let {recommendationId, keyword} = nextProps.params
        if (recommendationId) {
            Actions.getBooksByCategory(recommendationId).then(books => {
                this.setState({ books })
            })
            Actions.getCategory(recommendationId).then(category => {
                console.log(category)
                this.setState({ category })
            })
        } else if (keyword) {
            Actions.searchBooks(keyword).then(books => {
                this.setState({ books })
            })
        }

    }
    onClickBook(book) {
        window.location = `#/readbook/${book.bookId}`
    }
    render() {
        // console.log("props: ", this.props)
        let {recommendationId, keyword} = this.props.params
        return <div style={{ minHeight: 100 }}>
            <h1>{this.state.category.title || keyword}</h1>
            {this.state.books.map(book => <div key={book.bookId} style={{ float: "left", width: 150, margin: 10 }} onClick={() => this.onClickBook(book)}>
                <div>
                    <img className="img-responsive" style={{ width: 150, height: 200, objectFit: "cover" }} src={`bookService/getBookCover/${book.cover}`} />
                    <div className="text-center" style={{ width: 150, height: 30, lineHeight: "30px" }}><Link to={`/bookdetails/${book.bookId}`}>{book.name}</Link></div>
                </div>
            </div>
            )}
        </div>
    }
}